'use client'
import { useState, useEffect, useRef } from "react"
import Loading from './loading'
// import Image from "next/image"
import { Image, Spinner } from "@nextui-org/react"

export default function ImageRiver({
    list,
    loading,
    onBottom=()=>{}
}){
    const imageRiverContainerRef = useRef(null)
    const [containerHeight, setContainerHeight] = useState(imageRiverContainerRef.current?imageRiverContainerRef.current.clientHeight : 0)
    function handleBottom(){
        alert("底部")
        onBottom()
    }
    useEffect(()=>{
        const handleScroll = () => {
            const scrollY = imageRiverContainerRef.current.scrollTop
            const scrollHeight = imageRiverContainerRef.current.scrollHeight
            const clientHeight = imageRiverContainerRef.current.clientHeight
            if(scrollY + clientHeight >= scrollHeight) {
                handleBottom()
            }
        }
        const height = imageRiverContainerRef.current.clientHeight
        setContainerHeight(height)
        imageRiverContainerRef.current.addEventListener('scroll', handleScroll)
        return () => {
            imageRiverContainerRef.current && imageRiverContainerRef.current.removeEventListener('scroll', handleScroll)
        }
    },[]);
    return (<div className="image_river overflow-y-auto min-h-full  mt-9" ref={imageRiverContainerRef} style={containerHeight!=0?{'height':(containerHeight - 184>0?containerHeight - 184:containerHeight)+'px'}:{}}>
        <div className="image_river_container waterfall-flow-6 block px-8">
            {
                list.map((item,index)=>{
                    return(
                        <div className="image_river_item break-inside-avoid mb-[44px]" key={index}>
                            <div>
                                <Image src={item.url} className="image_river_img" alt={item.url} width="100%"/>
                            </div>
                        </div>
                    )
                })
            }
        </div>
        <div className="loadMore w-full py-[83px] flex flex-col justify-center items-center">
            <div className="loadText text-[12px]">{!loading?"下拉加载更多":"加载中"}</div>
            {
                loading? (<Spinner size="sm"/>):(<></>)
            }
        </div>
    </div>)
}